<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>首页</title>
    <!-- ZUI 标准版压缩后的 CSS 文件 -->
    <link rel="stylesheet" href="css/zui.min.css">

    <!-- ZUI Javascript 依赖 jQuery -->
    <script src="lib/jquery/jquery.js"></script>
    <script>if (typeof module === 'object') { window.jQuery = window.$ = module.exports; };</script>


    <!-- ZUI 标准版压缩后的 JavaScript 文件 -->
    <script src="js/zui.min.js"></script>
    <script src="js/vue.js"></script>
    <link href="lib/treemap/zui.treemap.min.css" rel="stylesheet">
    <script src="lib/treemap/zui.treemap.min.js"></script>
    <script src="js/layer/layer.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <script src="layui/layui.js" charset="utf-8"></script>
    <script src="js/cycle.js"></script>


</head>

<body>
    <div id="app" style="padding:15px">
        <nav class="navbar " role="navigation">
            <div class="container-fluid">
                <!-- 导航头部 -->
                <div class="navbar-header">
                    <!-- 移动设备上的导航切换按钮 -->
                    <button type="button" class="navbar-toggle" data-toggle="collapse"
                        data-target=".navbar-collapse-example">
                        <span class="sr-only">切换导航</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <!-- 品牌名称或logo -->
                    <a class="navbar-brand disable">可靠性分析</a>
                </div>
                <!-- 导航项目 -->
                <div class="collapse navbar-collapse navbar-collapse-example">
                    <!-- 一般导航项目 -->
                    <ul class="nav navbar-nav ">
                        <li id="idHome" @click="toPage('home')"><a>首页</a></li>
                        <li id="idTree" @click="toPage('tree')"><a>故障树</a></li>
                        <li id="idFunEa" @click="toPage('ea')"><a>报表生成</a></li>

                        <!-- 导航中的下拉菜单 
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown">管理 <1b class="caret"></b></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a>任务</a></li>

                            </ul>
                        </li>-->
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">项目管理 <b class="caret"></b></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#" data-toggle="modal" data-target="#Project_New">新建项目</a></li>
                                <li class="divider"></li>
                                <li><a href="#" data-toggle="modal" data-target="#Project_List">项目列表</a></li>
                            </ul>
                        </li>
                    </ul>
                </div><!-- END .navbar-collapse -->
            </div>
        </nav>



        <!--内容开始-->
        <div class="container-fluid" id="page1" style="padding:10px;display: none"> </div>
        <div class="container-fluid" id="page2" style="padding:10px;display: none"> </div>
        <div class="container-fluid" id="page3" style="padding:10px;display: none"> </div>

        <!--内容，使用post动态加载-->
    </div>


    <!-- 项目管理的对话框HTML -->
    <!--新建项目-->
    <div class="modal fade" id="Project_New">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
                            class="sr-only">关闭</span></button>
                    <h4 class="modal-title">新建项目</h4>
                </div>
                <div class="modal-body">
                    <!--新建项目窗口的表单输入-->
                    <div class="container-fluid">
                        <div class="row">
                            <input class="form-control form-focus" autofocus type="text" placeholder="项目名称"
                                v-model="strProject" style="margin:10px">
                            <textarea class="form-control" rows="3" placeholder="项目描述" v-model="strDesc"
                                style="margin:10px"></textarea>
                        </div>

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" @click="btnSave">保存</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 项目列表-->
    <div class="modal fade" id="Project_List">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
                            class="sr-only">关闭</span></button>
                    <h4 class="modal-title">项目列表管理</h4>
                </div>
                <div class="modal-body">
                    <!--这里是一个列表，通过列表来选择项目
                    <div class="list-group">
                        <a href="#" class="list-group-item">
                            <h4 class="list-group-item-heading">项目</h4>
                            <p class="list-group-item-text text-muted">共12个新条目</p>
                        </a>
                        <a href="#" class="list-group-item active">
                            <h4 class="list-group-item-heading">Bug</h4>
                            <p class="list-group-item-text text-muted">没有未处理的bug</p>
                        </a>
                        <a href="#" class="list-group-item">
                            <h4 class="list-group-item-heading">任务</h4>
                            <p class="list-group-item-text text-muted"># 处理bug</p>
                        </a>
                    </div>

                    列表结束-->
                    <div class="list-group">
                        <a href="#" class="list-group-item" v-for="item,index in listProject" @click="setProject(index)">
                            <h4 class="list-group-item-heading">{{ item.name }}</h4>
                            <p class="list-group-item-text text-muted">{{ item.description }}</p>
                        </a>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

                </div>
            </div>
        </div>
    </div>

    <!--脚本位置-->
    <script>
        const fs = require('fs');
        writeFile = function (file, obj) {
            var fs = require('fs'); // 引入fs模块
            fs.writeFile(file, JSON.stringify(obj), error => {
                if (error) return console.log("写入文件失败,原因是" + error.message);
                console.log(file + "写入成功");
            });
        }
        //nodejs部分，全局ipc通知变量，用于向渲染进程发送消息
        const ipc = require('electron').ipcRenderer
        $.get("page/pageHome.html", {}, function (result) {
            $("#page1").html(result)
        })
        $.get("page/pageTree.html", {}, function (result) {
            $("#page2").html(result)
        })
        $.get("page/pageEA.html", {}, function (result) {
            $("#page3").html(result)
        })
        var vm = new Vue({
            el: "#app",
            data: {
                selected: "",
                pstrFunction: "", //元器件的功能
                title: "",//元器件的名字
                pstr1_1: "", //第一个plane的故障原因和影响
                pstr1_2: "",
                pstr2_1: "", //第2个plane的故障原因和影响
                pstr2_2: "",
                pstr3_1: "", //第3个plane的故障原因和影响
                pstr3_2: "",
                items: [], //储存元器件的总表
                system: []//系统级别
            },
            methods: {
                toPage: function (page) {
                    if (page == "home") {
                        $("#page1").show()
                        $("#page2").hide()
                        $("#page3").hide()
                    }
                    if (page == "tree") {
                        $("#page1").hide()
                        $("#page2").show()
                        $("#page3").hide()
                    }
                    if (page == "ea") {
                        $("#page1").hide()
                        $("#page2").hide()
                        $("#page3").show()
                    }
                }

            }
        })
        vm.toPage("home")

        var vmNewProject = new Vue({  //新建项目窗口的逻辑
            el: "#Project_New",
            data: {
                strProject: "",//项目名称
                strDesc: "",//项目描述
            },
            methods: {
                btnSave: function () {
                    //保存项目按钮的逻辑
                    //将项目保存在软件目录下的project文件夹中
                    
                    console.log("创建目录");
                    var dir = "./project/" + this.strProject;
                    fs.mkdir(dir, function (err) {
                        if (err) {
                            // alert("目录创建失败，请检查目录名是否重复且符合windows要求");
                            new $.zui.Messager('目录创建失败，请检查目录名是否重复且符合windows要求', {
                                icon: 'bell', // 定义消息图标
                                type: 'warning' // 定义颜色主题
                            }).show();
                            vmNewProject.$data.strProject = "";
                            vmNewProject.$data.strDesc = "";
                        } else {
                            console.log("目录创建成功。");
                            //alert("目录创建成功。");
                            new $.zui.Messager('目录创建成功。', {
                                icon: 'bell', // 定义消息图标
                                type: 'success' // 定义颜色主题
                            }).show();
                            $('#Project_New').modal('hide');

                            var fullpath = dir + "/main.json";//确定项目配置文件目录
                            writeFile(fullpath, {
                                "name": vmNewProject.$data.strProject,
                                "description": vmNewProject.$data.strDesc
                            });
                            vmNewProject.$data.strProject = "";//写入文件后清空标题以及描述
                            vmNewProject.$data.strDesc = "";
                        }

                    });


                },

            }
        });


        var vmProjectList = new Vue({ //选择项目列表的vue实例
            el: "#Project_List",
            data: {
                listProject: [],
                currentProject:""
            },
            methods: {
                getProject: function () {
                    //打开对话框并且刷新目录列表
                    // $('#Project_List').modal('show');
                    console.log("读取项目");
                    this.listProject=[];//清空先前的列表
                    let listProject = [];
                    const files = fs.readdirSync('./project')
                    files.forEach(function (item, index) {//循环每个项目
                        let stat = fs.lstatSync("./project/" + item)
                        if (stat.isDirectory() === true) {//如果目录存在，就读取其下的main.json文件
                            fs.readFile("./project/" + item + '/main.json', 'utf-8', function (err, data) {
                                if (err) {
                                    throw err;
                                }
                                //将字符串转换成为json对象
                                var obj = JSON.parse(data);
                                obj["dir"] = item;//将工程对应的文件夹的名字也装入其中
                                listProject.push(
                                    obj
                                );//放入list中
                            });

                        }
                    });
                    this.listProject = listProject;
                    console.log(listProject);
                },
                setProject:function(index){ 
                    //给每一个项目添加其点击事件，点击以后即可以选择相应的工程进行操作，并且隐藏对话框
                    //加载工程
                    $('#Project_List').modal('hide');
                    this.currentProject=this.listProject[index];
                    vm_index.$data.currentProject=this.currentProject;
                    //alert("加载了工程:"+this.currentProject.name);

                }
            },


        });
        $('#Project_List').on('shown.zui.modal', function () {//当对话框启动的时候获取新的目录
            vmProjectList.getProject();
        })

    </script>

</body>

</html>